<template>

	<view class="guess-section">
		<view v-for="(item, index) in productList" :key="index" class="guess-item" @click="navToDetailPage(item)">
			<view class="image-wrapper">
				<image :src="item.pic" mode="aspectFill"></image>
			</view>
			<text class="title clamp">{{item.name}}</text>
			<text class="title2 clamp">{{item.subTitle}}</text>
			<text class="price">￥{{item.price}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "product-list-gird",
		data() {
			return {

			};
		},
		props: {
			productList: Array
		},
		methods: {
			//商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
		justify-content: space-between;
	
		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
	
			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}
	
		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
	
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
	
		.image-wrapper-brand {
			width: 100%;
			height: 150upx;
			border-radius: 3px;
			overflow: hidden;
	
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
	
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
	
		.title2 {
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 40upx;
		}
	
		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
</style>